<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
    <script src="./js/vue@2.js"></script>
    <title>Goodlifestylenow</title>
</head>
<style>
    .typename {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 55px;
    }
    .typename h2 {
        position: relative;
        text-align: center;
        font-size: 24px;
        color: var(--main-color);
        text-transform: uppercase;
        font-weight: 400;
        z-index: 9;
        width: fit-content;
        background-color: #fff;
        padding: 0 22px;
    }
    .typename::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 100%;
        height: 1px;
        background-color: #ddd;
        transform: translateY(-50%);
        z-index: -1;
    }
</style>
<body>
    <div id="app" v-cloak>
        <a-header></a-header>
        <main>
            <div class="content">
                <div class="typename">
                    <h2>{{typename}}</h2>
                </div>
                <div class="content-wrapper">
                    <div class="content-wrapper-main">
                        <section v-if="hotFir.length > 0">
                            <div class="top-wrapper">
                                <div class="news" :class="{second: index < 2}" v-for="(news, index) in hotFir"
                                    :key="news.id">
                                    <a :href="useToDetail(news.id)">
                                        <img class="news-poster" :src="news.img" loading="lazy" :alt="news.title"
                                            width="260">
                                        <div class="">
                                            <h2 class="news-title">{{news.title}}</h2>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </section>
                        <section v-if="hotInser.length > 0">
                            <div class="top-wrapper">
                                <div class="news second" style="order: 1;">
                                    <a class="news-inset-side" :href="useToDetail(news.id)" v-for="(news, index) in hotInser">
                                        <img class="news-inset-side_img" :src="news.img" loading="lazy" :alt="news.title"
                                            width="75">
                                        <p class="news-inset-side_title">{{news.title}}</p>
                                    </a>
                                </div>
                                <div class="news" :class="{second: index < 1}" :style="{order: index}" v-for="(news, index) in hotSec"
                                    :key="news.id">
                                    <a :href="useToDetail(news.id)">
                                        <img class="news-poster" :class="{inset: index < 1}" :src="news.img" loading="lazy" :alt="news.title"
                                            width="260">
                                        <div class="">
                                            <h2 class="news-title">{{news.title}}</h2>
                                        </div>
                                    </a>
                                </div>

                            </div>
                        </section>
                        <section v-if="hotThir.length > 0">
                            <div class="top-wrapper">
                                <div class="news" v-for="(news, index) in hotThir"
                                    :key="news.id">
                                    <a :href="useToDetail(news.id)">
                                        <img class="news-poster" :src="news.img" loading="lazy" :alt="news.title"
                                            width="260">
                                        <div class="">
                                            <h2 class="news-title">{{news.title}}</h2>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="content-wrapper-side">
                        <div class="content-wrapper-side-news">
                            <h5>TRENDING ARTICLES</h5>
                            <ul class="side-list">
                                <li v-for="(news, index) in side" :key="news.id">
                                    <div class="corner">{{index+1}}</div>
                                    <a class="side-list-item" :href="useToDetail(news.id)">
                                        <img class="side-news-poster" :src="news.img" :alt="news.title">
                                        <p class="side-news-title">{{news.title}}</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="content-wrapper-side-ad">
                            <div class="ad">
                                <div class="ad-wrapper">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
<script src="./main.js"></script>
<script type="module">
    import { header, footer } from './components/index.js'
    var vm = new Vue({
        el: '#app',
        components: {
            aHeader: header,
            aFooter: footer
        },
        data() {
            return {
                categories: [
                    {
                        name: 'Finance',
                        id: '1',
                        icon: './imgs/finance.svg'
                    },
                    {
                        name: 'Fashion',
                        id: '2',
                        icon: './imgs/fashion.svg'
                    },
                    {
                        name: 'Health',
                        id: '3',
                        icon: './imgs/health.svg'
                    },
                    {
                        name: 'Technology',
                        id: '4',
                        icon: './imgs/tec.svg'
                    },
                    {
                        name: 'Sports',
                        id: '5',
                        icon: './imgs/sport.svg'
                    }
                ],
                hot: [],
                simple: [],
                long: [],
                side: [],
                typename: ''
            }
        },
        computed: {
            hotFir() {
                return this.hot.slice(0,5)
            },
            hotInser() {
                return this.hot.slice(5,8)
            },
            hotSec() {
                return this.hot.slice(8,12)
            },
            hotThir() {
                return this.hot.slice(12,18)
            }
        },
        created() {
            this.handleFetchNewsList()
            this.typename = getQueryVariable('name')
        },
        methods: {
            useToDetail,
            handleFetchNewsList() {
                fetch('https://migame.vip/gamefront/blog/blogApiList', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        pageNum: 1,
                        pageSize: 23,
                        blogTypeId: getQueryVariable('type'),
                        siteId,
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.code == 0) {
                            this.side = res.data.splice(0, 5)
                            this.hot = res.data
                        }
                    })
                    .catch(err => {
                        throw new Error(err)
                    })
            }
        }
    })
</script>

</html>